<template>
  <div>
    <div>
      <el-dropdown v-if="hasRole(`project:${projectId}`, [Role.dev, Role.admin])" trigger="click" @command="handleCommand">
        <el-button type="primary" size="mini">
          新建接口 <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-document" :command="onDocNew">新建接口</el-dropdown-item>
          <el-dropdown-item icon="el-icon-folder" :command="onFolderAdd">新建分类</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="table-right">
        <div class="table-right-item">
          <el-input
            v-model="tableSearch"
            prefix-icon="el-icon-search"
            clearable
            size="mini"
            placeholder="过滤: 支持ID、名称、路径"
            style="width: 300px;"
          />
        </div>
        <div class="table-right-item">
          <el-tooltip placement="top" content="刷新表格">
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click="refreshTable" />
          </el-tooltip>
        </div>
        <div class="table-right-item">
          <el-dropdown v-show="tableData.length > 0" trigger="click" @command="handleCommand">
            <el-button type="primary" size="mini">
              导出 <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="onExportMarkdownSinglePage">导出markdown(单页)</el-dropdown-item>
              <el-dropdown-item :command="onExportMarkdownMultiPages">导出markdown(多页)</el-dropdown-item>
              <el-dropdown-item divided :command="onExportHtmlSinglePage">导出html(单页)</el-dropdown-item>
              <el-dropdown-item :command="onExportHtmlMultiPages">导出html(多页)</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :cell-style="cellStyleSmall()"
      :header-cell-style="headCellStyleSmall()"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="name"
        label="文档名称"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
          <div v-if="isDoc(scope.row)" style="display: inline-block;">
            <div v-if="!scope.row.isShow">
              <el-tooltip placement="bottom" content="隐藏">
                <svg-icon icon-class="eye" svg-style="color: #e6a23c" />
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="请求路径"
      >
        <template slot-scope="scope">
          <http-method v-if="scope.row.url" :method="scope.row.httpMethod" />
          <span style="margin-left: 5px;">{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creatorName"
        label="创建人"
        width="100"
      />
      <el-table-column
        prop="gmtCreate"
        label="创建时间"
        width="100"
      >
        <template slot-scope="scope">
          <time-tooltip :time="scope.row.gmtCreate" />
        </template>
      </el-table-column>
      <el-table-column
        prop="modifierName"
        label="最后修改人"
        width="100"
      />
      <el-table-column
        prop="gmtModified"
        label="修改时间"
        width="100"
      >
        <template slot-scope="scope">
          <time-tooltip :time="scope.row.gmtModified" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="hasRole(`project:${projectId}`, [Role.dev, Role.admin])"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="isFolder(scope.row)">
            <el-link type="primary" @click="onDocAdd(scope.row)">添加接口</el-link>
          </div>
          <div v-else>
            <router-link v-if="scope.row.isShow" :to="`/view/${scope.row.id}`" target="_blank">
              <el-link type="primary">预览</el-link>
            </router-link>
            <el-link type="primary" @click="onDocUpdate(scope.row)">修改</el-link>
            <el-popconfirm
              :title="`确定要删除 ${scope.row.name} 吗？`"
              @onConfirm="onDocRemove(scope.row)"
            >
              <el-link v-if="scope.row.children.length === 0" slot="reference" type="danger">删除</el-link>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        label="操作"
        width="80"
      >
        <template slot-scope="scope">
          <div v-if="!isFolder(scope.row)">
            <router-link v-if="scope.row.isShow" :to="`/view/${scope.row.id}`" target="_blank">
              <el-link type="primary">预览</el-link>
            </router-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss">
.table-right {
  float: right;
  margin-bottom: 10px;
  .table-right-item {
    display: inline-block;
  }
}
</style>
<script>
import ExportUtil from '@/utils/export'
import HttpMethod from '@/components/HttpMethod'
import SvgIcon from '@/components/SvgIcon'
import TimeTooltip from '@/components/TimeTooltip'

export default {
  name: 'DocTable',
  components: { HttpMethod, SvgIcon, TimeTooltip },
  props: {
    projectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moduleId: '',
      tableData: [],
      tableSearch: ''
    }
  },
  methods: {
    refreshTable() {
      this.loadTable(function() {
        this.tipSuccess('刷新成功')
      })
    },
    loadTable(callback) {
      this.reload(this.moduleId, callback)
    },
    reload(moduleId, callback) {
      if (moduleId) {
        this.moduleId = moduleId
      }
      this.get('/doc/list', { moduleId: this.moduleId }, function(resp) {
        this.tableData = this.convertTree(resp.data)
        callback && callback.call(this)
      })
    },
    onFolderUpdate(row) {
      this.$prompt('请输入分类名称', '修改分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.name,
        inputPattern: /^.{1,64}$/,
        inputErrorMessage: '不能为空且长度在64以内'
      }).then(({ value }) => {
        const data = {
          id: row.id,
          name: value
        }
        this.post('/doc/folder/update', data, () => {
          this.tipSuccess('修改成功')
          this.reload()
        })
      }).catch(() => {
      })
    },
    onDocNew() {
      this.goRoute(`/doc/new/${this.moduleId}`)
    },
    onFolderAdd() {
      this.$prompt('请输入分类名称', '新建分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,64}$/,
        inputErrorMessage: '不能为空且长度在64以内'
      }).then(({ value }) => {
        const data = {
          name: value,
          moduleId: this.moduleId
        }
        this.post('/doc/folder/add', data, () => {
          this.tipSuccess('创建成功')
          this.reload()
        })
      }).catch(() => {
      })
    },
    isDoc(row) {
      return !this.isFolder(row)
    },
    isFolder(row) {
      return row.isFolder === 1
    },
    tableRowClassName({ row, index }) {
      row.hidden = false
      if (this.tableSearch.length === 0) {
        return ''
      }
      const searchText = this.tableSearch.toLowerCase()
      const find = (row.id && row.id.toLowerCase().indexOf(searchText) > -1) ||
        (row.name && row.name.toLowerCase().indexOf(searchText) > -1) ||
        (row.url && row.url.toLowerCase().indexOf(searchText) > -1)
      // 没有找到，隐藏
      if (!find) {
        row.hidden = true
        return 'hidden-row'
      }
      return ''
    },
    onDocRemove(row) {
      const data = {
        id: row.id
      }
      this.post('/doc/delete', data, () => {
        this.tipSuccess('删除成功')
        this.reload()
      })
    },
    onDocAdd(row) {
      this.goRoute(`/doc/new/${this.moduleId}/${row.id}`)
    },
    onDocUpdate: function(row) {
      if (row.isFolder) {
        this.onFolderUpdate(row)
      } else {
        this.goRoute(`/doc/edit/${this.moduleId}/${row.id}`)
      }
    },
    onExportMarkdownSinglePage() {
      ExportUtil.exportMarkdownAllInOne(this.moduleId)
    },
    onExportMarkdownMultiPages() {
      ExportUtil.exportMarkdownMultiPages(this.moduleId)
    },
    onExportHtmlSinglePage() {
      ExportUtil.exportHtmlAllInOne(this.moduleId)
    },
    onExportHtmlMultiPages() {
      ExportUtil.exportHtmlMultiPages(this.moduleId)
    }
  }
}
</script>
